<script>
import { mapState } from 'vuex'
import { presentationlist, addPresentation, delPresentation, importPresentation } from '@/api/recive/presentation'
import { Message } from 'element-ui'

const defaultForm = {
  courierNumber: '', // 快递单号
  companyId: 1 // 快递公司编号
}
export default {
  name: 'presentation',
  computed: {
    ...mapState({
      company: state => state.custom_dict.company
    }),
  },
  data() {
    return {
      search_form: { ...defaultForm }, // 搜索条件
      table_data: [], // 表格展示数据
      inputfile: null
    }
  },
  methods: {
    // 操作 查询 2 / 新增 1
    async operate(type) {
      if(this.search_form.courierNumber.length > 0) {
        if(type === 1) {
          // 新增
          const res = await addPresentation(this.search_form)
          this.table_data.push(res.data)
          console.log(this.table_data)
        } else {
          // 查询
          const res = await presentationlist(this.search_form);
          this.table_data = res.data.data
        }
      } else {
        Message.error('快递单号不可为空')
      }
    },
    // 删除单条数据
    del(data) {
      console.log(data)
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delPresentation(data.id).then(res => {
          this.$message.success('删除成功!')
          // 清除展示数据中该条数据
          this.table_data = this.table_data.map(item => {
            if(item.id !== data.id) {
              return item
            }
          }).filter(value => { return value !== undefined })
        })
      })
    },
    // 导出
    downLoad() {
      if (this.table_data.length > 0) {
        // 查找快递公司
        const data = this.table_data.map(item => { return item.id })
        this.download('/base/manageDeliveryDocuments/exportSignedDelivery', { ids: data }, `presentation_${new Date().getTime()}.xlsx`)
      } else {
        this.$message.error('当前暂无新增数据')
      }
    },
    // 导入
    ImportFile() {
      this.$refs.inputfile.click()
    },
    // 传入文件
    changeExcel(e) {
      // 错误情况判断
      const files = e.target.files[0]
      if (files.length <= 0) {
        return false
      }
      let data = new FormData()
      data.append('file', files)
      importPresentation(data).then(res => {
        this.$message.success('导入成功!')
      })
    },
  }
}
</script>

<template>
  <div class="h-full">
    <div class="flex flex-wrap justify-between items-center mb-3">
      <div class="flex flex-wrap items-center">
        <div class="flex items-center mr-3 mt-3">
          <div class="text-sm mr-3 min-w-[60px]">快递公司</div>
          <el-select ref="select"  v-model="search_form.companyId" clearable>
            <el-option
              v-for="(item, index) in company"
              :key="index"
              :value="item.id"
              :label="item.companyName"
            />
          </el-select>
        </div>
        <div class="flex items-center mr-3 mt-3">
          <div class="text-sm mr-3 min-w-[60px]">快递单号</div>
          <el-input v-model="search_form.courierNumber" placeholder="请输入快递单号" clearable />
        </div>
        <div class="flex items-center mt-3 text-red">
          {{ table_data.length }}
        </div>
      </div>
      <div class="mt-3">
        <el-button type="success" @click="operate(1)">新增</el-button>
        <el-button type="primary" @click="operate(2)">查询</el-button>
        <el-button type="primary" @click="ImportFile">导入</el-button>
        <el-button type="primary" @click="downLoad">导出</el-button>
        <!-- 不显示 文件上传的图标 -->
        <input type="file" accept=".xls,.xlsx" ref="inputfile" @change="changeExcel" class="hidden"/>
      </div>
    </div>
    <div class="h-[calc(100%-56px)]">
      <el-table
        :data="table_data"
        stripe
        style="width: 100%"
      >
        <el-table-column type="index" />
        <el-table-column  prop="courierNumber" label="快递单号" align="center" />
        <el-table-column  prop="companyName" label="快递公司" align="center" />
        <el-table-column  prop="entryEmployee" label="录入员工" align="center" />
        <el-table-column  prop="createTime" label="录入日期" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
